<template>
  <BaseLayout>
    <template v-slot:menu>
      <el-tabs
        v-model="tagId"
        tab-position="right"
        @tab-click="handleClick">
        <el-tab-pane
          v-for="item in tagList"
          :key="item._id"
          :label="item.name"
          :name="item._id"/>
      </el-tabs>
    </template>
    <template v-slot:content>
      <el-table
        :data="totalData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="date"
          label="贴图"
          width="180">
          <template v-slot:default="scope">
            <img
              :src="domain + scope.row.src"
              alt="掌上饥荒"
              width="48">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="180"/>
        <el-table-column
          prop="hungry"
          label="饱食"/>
        <el-table-column
          prop="hp"
          label="血量"/>
        <el-table-column
          prop="san"
          label="精神"/>
        <el-table-column
          prop="fresh"
          label="保质期"/>
        <el-table-column
          align="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleEdit(scope.$index, scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </BaseLayout>
</template>

<script>
  import BaseLayout from '~/components/BaseLayout';

  export default {
    name: "Food",
    watchQuery: true,
    scrollToTop: true,
    async asyncData({ store, $axios, query }) {
      let tagList = await $axios.$get(`https://fireleaves.cn/tags/`, {
        params: {
          type: 'foods',
          version : store.state.version
        }
      });      
      let tagId = query.id ? query.id : tagList[0]._id;
      let totalData = await $axios.$get(`https://fireleaves.cn/food/`, {
        params: {
          version : store.state.version,
          tagId
        }
      });
      return {
        totalData,
        tagList,
        tagId
      }
    },
    components: {
      BaseLayout
    },
    data() {
      return {
      }
    },
    computed: {
    },
    watch:{
      '$store.state.version' : function(newValue) {
        this.$router.push({
          path : '/food',
          query: {
            version : newValue
          }
        })
      }
    },
    methods: {
      handleClick(tab, event) {
        window.scrollTo(0,0);
        this.$router.push({
        path: '/food',
        query: {
          id: tab.name
        }
      })      
      },
      handleEdit(index,row){
        this.$router.push({
          path : '/food/detail',
          query: {
            src : row.src
          }
        });
      }
    },
    head() {
      return this.$seo(`饥荒食谱`, "掌上饥荒提供各个版本的饥荒食谱资料","饥荒食谱,掌上饥荒,SW食谱,HAMLET食谱,DST食谱");
    }
  }
</script>

<style lang="scss" scoped>

</style>
